/* 客户端 结算管理 应付款管理 */
<template>
  <div>
    <!-- 头部组件 -->
    <tmsHeader :tmsheader="tmsheader"></tmsHeader>
    <!-- 索引板块 -->
   <el-container>
  <el-main class="headerAttr">
    <el-form ref="form" :model="form" label-width="80px">
      
   <el-row :gutter="20">
     <el-col :span="2">
      <el-select v-model="form.region" placeholder="索引条件">
        <el-option label="订单号" value="dingdan"></el-option>
        <el-option label="合同编号" value="hetong"></el-option>
        <el-option label="始发地" value="shifadi"></el-option>
        <el-option label="目的地" value="mudidi"></el-option>
        <el-option label="委托方" value="weituoren"></el-option>
        <el-option label="公司名" value="gongshiren"></el-option>
        <el-option label="联系人" value="lianxiren"></el-option>
      </el-select>
     </el-col>
     <el-col :span="4">     
        <el-input v-model="form.name"></el-input>  
     </el-col>
     
     <el-col :span="4"></el-col>
     <el-col :span="2">
       <el-select v-model="form.region2" placeholder="时间条件">
        <el-option label="下单时间" value="xiadan"></el-option>
        <el-option label="报价有效截止期" value="jiezhiriqi"></el-option>
      </el-select>
     </el-col>
    <el-col :span="4">
      <el-date-picker type="date" placeholder="选择开始日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    
    <el-col :span="4">
      <el-date-picker type="date" placeholder="选择结束日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col :span="2">
      <el-button type="primary"  round>搜索</el-button>
    </el-col>
    </el-row>
    <el-tabs type="border-card">
      <!-- 选项卡 -->
  <el-tab-pane label="全部（13）">
    <!-- 表格 -->
     <el-table
    :data="tableData"
    stripe
    style="width: 100%">
     <el-table-column
      prop="caozuo"
      label="操作">
       <el-button type="primary" @click="xinagqing()" round>查看</el-button>
    </el-table-column>
    <el-table-column
      prop="order"
      label="订单号">
    </el-table-column>
    <el-table-column
      prop="orderTime"
      label="下单时间">
    </el-table-column>
    <el-table-column
      prop="ContractNo"
      label="合同编号">
    </el-table-column>
    <el-table-column
      prop="goAddress"
      label="始发地">
    </el-table-column>
    <el-table-column
      prop="address"
      label="目的地">
    </el-table-column>
    <el-table-column
      prop="getGoods"
      label="收货方">
    </el-table-column>
    <el-table-column
      prop="tmsName"
      label="货物名称">
    </el-table-column>
    <el-table-column
      prop="tmsWeight"
      label="重量（kg）">
    </el-table-column>
    <el-table-column
      prop="tmsPrice"
      label="运输费（￥）">
    </el-table-column>
    <el-table-column
      prop="reOrderTime"
      label="回单时间">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态">
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
  </el-tab-pane>
  <el-tab-pane label="已结算（2）">配置管理</el-tab-pane>
  <el-tab-pane label="未结算（3）">角色管理</el-tab-pane>
  <el-tab-pane label="待审核（1）">定时任务补偿</el-tab-pane>
  <el-tab-pane label="确认结算（3）">定时任务补偿</el-tab-pane>
</el-tabs>
   
     

    </el-form>
  </el-main>
 
  
</el-container>
  </div>
</template>

<script>
import tmsHeader from '../../TmsHeader'
export default {
  name:"payment",
  data() {
      return {
        //头部组件的参数
        tmsheader:{
            tmsBigTitle:'客户端',
            tmsATitle:'结算管理',
            tmsBTitle:'订单结算'
        },
        form: {
          name: '',
          region: '',
          region2: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tableData: [
          {
            order: '2016-05-02',
            orderTime: '王小虎',
            ContractNo: '上海市普陀区金沙江路 1518 弄',
            goAddress: '上海市普陀区金沙江路 1518 弄',
            address: '上海市普陀区金沙江路 1518 弄',
            getGoods: '上海市普陀区金沙江路 1518 弄',
            tmsName: '上海市普陀区金沙江路 1518 弄',
            tmsWeight: '上海市普陀区金沙江路 1518 弄',
            tmsPrice: '上海市普陀区金沙江路 1518 弄',
            reOrderTime: '上海市普陀区金沙江路 1518 弄',
            state: 'sadasd',
            caozuo: 'xxx',
          }, 
           {
            order: '2016-05-02',
            orderTime: '王小虎',
            ContractNo: '上海市普陀区金沙江路 1518 弄',
            goAddress: '上海市普陀区金沙江路 1518 弄',
            address: '上海市普陀区金沙江路 1518 弄',
            getGoods: '上海市普陀区金沙江路 1518 弄',
            tmsName: '上海市普陀区金沙江路 1518 弄',
            tmsWeight: '上海市普陀区金沙江路 1518 弄',
            tmsPrice: '上海市普陀区金沙江路 1518 弄',
            reOrderTime: '上海市普陀区金沙江路 1518 弄',
            state: 'sadasd',
            caozuo: 'xxx',
          }, 
           {
            order: '2016-05-02',
            orderTime: '王小虎',
            ContractNo: '上海市普陀区金沙江路 1518 弄',
            goAddress: '上海市普陀区金沙江路 1518 弄',
            address: '上海市普陀区金沙江路 1518 弄',
            getGoods: '上海市普陀区金沙江路 1518 弄',
            tmsName: '上海市普陀区金沙江路 1518 弄',
            tmsWeight: '上海市普陀区金沙江路 1518 弄',
            tmsPrice: '上海市普陀区金沙江路 1518 弄',
            reOrderTime: '上海市普陀区金沙江路 1518 弄',
            state: 'sadasd',
            caozuo: 'xxx',
          }, 
          ],
        currentPage1: 1,
        currentPage2: 2,
        currentPage3: 3,
        currentPage4: 4
      }
    },

    components:{
      tmsHeader
    },

    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      xinagqing(){
        this.$router.push('/client/SettlementXq');
      }
    }
}

</script>
<style scoped>

 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    font-weight: 600;
    text-align: left;
    line-height: 100%;
  }
  .el-row{
    padding-bottom: 20px;
    text-align: left;
  }
  
</style>